<template>
  <div class="page" data-page="singleUnitCard" style="z-index: 2;">
    <div class="navbar">
      <div class="navbar-inner">
       <div class="left">
        <a  class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Back</span>
        </a>
      </div> 
      <div class="title sliding">警情排名</div>
    </div>
  </div>
   <div class="page-content home-content ptr-content">

    <!--建筑消防安全隐患排名模块-->
    <div class="trouble-title card-header">设备警情排名
      <div class="myblock">
        <form id="date-type-form">
          <select name="dateType" id="equipmentSafety_select" style="font-size:10px;padding:2px; border: 1px solid;  color:#1b9cd6;" class="date-type trouble-date-type"  @change="firstRank">
              <option value="2">最近一年</option>
              <option value="1">最近一个月</option>
              <option value="0">最近24小时</option>
          </select>  
        </form>  
      </div>
    </div> 
    <div class="page-content" style="padding-top: 0px;">
    <div class="card-content card-content-padding">
     <div class="list">
      <ul id="equpmentRankContent2">
       
      </ul>
    </div>
  </div>
  <!--<div class="preloader infinite-scroll-preloader"></div>-->
  </div>
</div>
<!--建筑消防安全隐患排名模块-->
</div>
</template>
<style scoped>
.trouble-li-content{
  position: relative;
}
.title {
  padding-right: 56px;
  margin: 0px auto;
}
#equpmentRankContent2{
  padding-left: 24px;
}
.trouble-title{
  padding-left: 14px;
  font-size: 14px;
}
.trouble-pic{
  width: 34px;
  height: 34px;
  position: relative;
  text-align: center;
}
.trouble-pic1{
  display:block;
  background-image:url(./img/home/redCircle.png);
  background-repeat: no-repeat;
  background-position:center;
}
.trouble-pic2{
  display:block;
  background-image:url(./img/home/yellowCircle.png);
  background-repeat: no-repeat;
  background-position:center;
}
.trouble-pic3{
  display:block;
  background-image:url(./img/home/blueCircle.png);
  background-repeat: no-repeat;
  background-position:center;
}
.trouble-pic4{
  display:block;
  background-image:url(./img/home/greenCircle.png);
  background-repeat: no-repeat;
  background-position:center;
}
.trouble-rank-no{
  position: absolute;
  bottom: 14px;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 10px;
  right: 0px;
}
.company-name{
  text-align: left;
  height: 20px;
  width: 200px;
  position: relative;
  right: -42px;
  bottom: 10px;
  font-size: 14px;
  font-weight: bold;
  color: #666666;
}
.company-address{
  text-align: left;
  height: 20px;
  width: 165px;
  position: relative;
  left: 42px;
  bottom: 10px;
  font-size: 12px;
  color: #999999;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}
.company-trouble-alarms{
  height: 20px;
  width: 120px;
  /*padding-right: 30px;*/
  text-align: right;
  position: absolute;
  right: -3px;
  bottom: 30px;
  font-size: 25px;
  color:#f5687b;
  font-weight: bold;
}
.company-alarms-unit{
  padding-left: 2px;
  padding-right: 20px;
  font-size: 14px;
  color:#f5687b;
  font-weight: normal;
}
</style>
<script>
  return {
       on: {
            pageInit: function(e, page) {
                  var self = this;
                  $("#equipmentSafety_select").val(this.$route.params.dataType)
                  $("#equpmentRankContent2").empty();
                  self.getRank(this.$route.params.dataType);
            }
         },
         
         data: function () {
          return {

          }
        },
        // Component Methods
        methods: {
          firstRank:function(){
             var self = this;
             $("#equpmentRankContent2").empty();
             var formData = app.form.convertToData('#date-type-form');
             var dateType = jQuery.trim(formData.dateType);
             self.getRank(dateType);

          },
          getRank: function (dateType) {
              var $ = this.$;
              var app = this.$app;
              var router = this.$router;
              common.loading(1);
              var id_org="";
              if (single_Orgid == "") {id_org=userInfor.organizationIds;}else {id_org=single_Orgid;}
              Dao.troubleRank({
                  userName:userInfor.accountName,
                  deviceId:appKeyObj.deviceId,
                  orgIds:id_org,
                  orgType:0,
                  time:dateType
              },  function (data) {
                  if(data && data.length>0) {
                      for (var i = 0; i < data.length; i++) {
                          if (i == 0) {
                              $("#equpmentRankContent2").append('<li class="item-inner trouble-li-content">'
                                  + '<div class="item-content trouble-pic trouble-pic1">'
                                  + '<div class="item-media"><span class="trouble-rank-no">No.1</span></div>'
                                  + '<div class=""><div class="company-name">' + data[i].fcfName
                                  + '</div><div class="company-address">' + data[i].fcfLocation
                                  + '</div></div></div><div class="company-trouble-alarms">' + data[i].num
                                  + '<span class="company-alarms-unit">次</span></div></li>');
                          } else if (i == 1) {
                              $("#equpmentRankContent2").append('<li class="item-inner trouble-li-content">'
                                  + '<div class="item-content trouble-pic trouble-pic2">'
                                  + '<div class="item-media"><span class="trouble-rank-no">No.2</span></div>'
                                  + '<div class=""><div class="company-name">' + data[i].fcfName
                                  + '</div><div class="company-address">' + data[i].fcfLocation
                                  + '</div></div></div><div class="company-trouble-alarms">' + data[i].num
                                  + '<span class="company-alarms-unit">次</span></div></li>');
                          } else if (i == 2) {
                              $("#equpmentRankContent2").append('<li class="item-inner trouble-li-content">'
                                  + '<div class="item-content trouble-pic trouble-pic3">'
                                  + '<div class="item-media"><span class="trouble-rank-no">No.3</span></div>'
                                  + '<div class=""><div class="company-name">' + data[i].fcfName
                                  + '</div><div class="company-address">' + data[i].fcfLocation
                                  + '</div></div></div><div class="company-trouble-alarms">' + data[i].num
                                  + '<span class="company-alarms-unit">次</span></div></li>');
                          } else {
                              $("#equpmentRankContent2").append('<li class="item-inner trouble-li-content">'
                                  + '<div class="item-content trouble-pic trouble-pic4">'
                                  + '<div class="item-media"><span class="trouble-rank-no">' + (i+1) + '</span></div>'
                                  + '<div class=""><div class="company-name">' + data[i].fcfName
                                  + '</div><div class="company-address">' + data[i].fcfLocation
                                  + '</div></div></div><div class="company-trouble-alarms">' + data[i].num
                                  + '<span class="company-alarms-unit">次</span></div></li>');
                          }
                      }
                      common.loading(0);
                  }else{
                      common.loading(0);
                      $("#equpmentRankContent2").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"></div>`);
                  }

                  });
              },
            },
          }
        </script>